<template>
  <a-form
    ref="formRef"
    size="large"
    :model="data"
    :style="{ width: '600px' }"
    @submit="handleSubmit"
  >
    <a-form-item
      field="title"
      label="题目标题"
      :rules="[
        { required: true, message: 'name is required' },
        { maxLength: 60, message: 'must be greater than 60 characters' },
      ]"
      :validate-trigger="['change', 'input']"
    >
      <a-input
        v-model="data.title"
        placeholder="please enter your username..."
      />
    </a-form-item>
    <a-form-item
      field="answer"
      label="答案"
      :rules="[
        { required: true, message: 'name is required' },
        { maxLength: 60, message: 'must be greater than 60 characters' },
      ]"
      :validate-trigger="['change', 'input']"
    >
      <a-input
        v-model="data.answer"
        placeholder="please enter your username..."
      />
    </a-form-item>
    <a-form-item
      field="difficulty"
      label="题目难度"
      :rules="[{ required: true, message: 'name is required' }]"
    >
      <a-select
        v-model="data.difficulty"
        placeholder="Please select ..."
        :options="difficultyTypeOptions"
        allow-clear
      >
      </a-select>
    </a-form-item>
    <a-form-item
      field="tags"
      label="题目标签"
      :rules="[{ required: true, message: 'name is required' }]"
    >
      <a-input-tag
        v-model="data.tags"
        placeholder="please enter your post..."
      />
    </a-form-item>
    <a-form-item
      field="radio"
      label="专属VIP"
      :rules="[{ required: true, message: 'name is required' }]"
    >
      <a-radio-group v-model="data.vip">
        <a-radio value="radio one">Radio One</a-radio>
        <a-radio value="radio two">Radio Two</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item field="status" label="是否发布">
      <a-switch v-model="data.status" />
    </a-form-item>
    <a-form-item field="multiSelect" label="所属题库">
      <a-select
        v-model="data.questionBank"
        placeholder="Please select ..."
        multiple
      >
        <a-option value="section one">Section One</a-option>
        <a-option value="section two">Section Two</a-option>
        <a-option value="section three">Section Three</a-option>
      </a-select>
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button html-type="submit">Submit</a-button>
        <a-button @click="resetForm">Reset</a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const formRef = ref();

  // 定义接口来表示父组件传递的数据类型
  interface UserData {
    answer: string;
    title: string;
    difficulty: number;
    tags: string[];
    questionBank: string[];
    createdTime: string;
    status: number;
    vip: number;
  }

  const props = defineProps<{
    data: UserData;
  }>();
  const defaultData: UserData = {
    answer: '',
    title: '',
    difficulty: 1,
    tags: [],
    questionBank: [],
    createdTime: '',
    status: 0,
    vip: 0,
  };
  // 解构 props 数据，直接获取 data
  const data = { ...props.data } || defaultData;

  const difficultyTypeOptions = [
    { label: '简单', value: 0 },
    { label: '中等', value: 1 },
    { label: '困难', value: 2 },
  ];

  // 修改后的 handleSubmit 方法，通过 formRef 触发表单验证，并返回Promise
  const handleSubmit = (): Promise<void> => {
    return new Promise((resolve, reject) => {
      formRef.value?.validate((errors: any, values: any) => {
        if (!errors) {
          console.log('Form submitted:', values);
          resolve();
        } else {
          console.log('Validation failed:', errors);
          reject(errors);
        }
      });
    });
  };

  defineExpose({
    handleSubmit, // 方法名
  });
  const resetForm = () => {
    if (formRef.value) {
      formRef.value.resetFields();
    }
  };
</script>
